<template>
    <div>
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <h3>日期样式一</h3>
        <div>
            <span class="dataPiakerText">时段</span><DatePicker type="daterange" format="yyyy/MM/dd" :options="options1" placement="bottom-start" placeholder="选择" style="width: 215px"></DatePicker>
        </div>
        <pre style="background-color: #ececec;">

            <code class="html" v-text="htmlCode1">
            </code>
        </pre>
        <pre style="background-color: #ececec;">

            <code class="html">

    export default {
        data () {
            return {
                options1: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                }
            }
        }
    }

            </code>
        </pre>
        <h3>日期样式二</h3>
        <div>
            <DatePicker type="date" format="yyyy/MM/dd" placeholder="选择" style="width: 215px"></DatePicker>
        </div>


        <pre style="background-color: #ececec;">

            <code class="html" v-text="htmlCode2">
            </code>
        </pre>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                options1: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                htmlCode1:'<DatePicker type="daterange" :options="options1" placement="bottom-start" placeholder="选择" style="width: 215px"></DatePicker>',
                htmlCode2:'<DatePicker type="date" placeholder="选择" style="width: 215px"></DatePicker>',
            }
        }
    }
</script>
